<template>
	<view class="point_report" :class="[scoreLevel]">
		<view class="text-container">
			<view class="left">

				<image class="bg_image" src="/static/icon/ai.svg" mode="widthFix"></image>
				<text class="text_gradient points normal">向AI询问优秀参考值和建议</text>
			</view>
			<!-- 添加向右箭头的 SVG 图标 -->
			<image class="arrow-icon" src="/static/icon/right.svg" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
	import normalIcon from "@/static/ring/normal.png";
	import successIcon from "@/static/ring/success.png";
	import warningIcon from "@/static/ring/warning.png";
	import dangerIcon from "@/static/ring/danger.png";

	import {
		queryMySleepInfoByDay
	} from "@/api/ring/chart.js";
	import dayjs from "dayjs";

	export default {
		props: {
			date: String,
		},
		data() {
			return {
				iconMap: {
					normal: normalIcon,
					success: successIcon,
					warning: warningIcon,
					danger: dangerIcon,
				},

				score: 0,
			};
		},
		computed: {
			scoreLevel() {
				const s = this.score;
				if (!s) return "normal";
				if (s >= 80) {
					return "success";
				} else if (s >= 40 && s < 80) {
					return "warning";
				} else {
					return "danger";
				}
			},

			icon() {
				return this.iconMap[this.scoreLevel];
			},
		},

		watch: {
			date: {
				handler(nv) {
					queryMySleepInfoByDay({
							dateStr: nv ? dayjs(nv).format("YYYY-MM-DD") : dayjs().format("YYYY-MM-DD"),
							offsetMinutes: new Date().getTimezoneOffset(),
						})
						.then((res) => {
							

							this.score = res.data.score;
						})
						.catch((error) => console.log(error));
				},
				deep: true,
				immediate: true,
			},
		},
	};
</script>
<style lang="scss" scoped>
	.point_report {
		width: 100%;
		padding: 12rpx 20rpx;
		background: rgba(255, 255, 255, 0.4);
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.text-container {
			display: flex;
			align-items: center; // 垂直居中
			width: 100%;
			justify-content: space-between;
			/* 使图标和文本分布在两端 */

			.left {
				display: flex;
				flex: 1;
				align-items: center;
			}
		}

		.bg_image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx; // 保持与文本的间距
		}

		// 添加箭头图标的样式
		.arrow-icon {
			width: 20rpx;
			/* 与 ai.svg 宽度保持一致 */
			margin-left: 12rpx;
			/* 保持与文本的间距 */
		}

		&.normal {
			// border: 1px solid #999999;
			border-radius: 20rpx;
		}

		&.danger {
			border: 1px solid #ff5555;
			border-radius: 30rpx;
			box-shadow: 0px 0px 20px 0px rgba(#ff5555, 0.5) inset;
		}

		&.warning {
			border: 1px solid rgba(#ffa53e, 1);
			border-radius: 30rpx;
			box-shadow: 0px 0px 20px 0px rgba(#ffa53e, 0.5) inset;
		}

		&.success {
			border: 1px solid rgba(#12be8a, 1);
			border-radius: 30rpx;
			box-shadow: 0px 0px 20px 0px rgba(#12be8a, 0.5) inset;
		}

		.score {
			font-size: 44rpx;
			font-weight: 500;
			line-height: 72rpx;
			text-align: left;
			margin-left: auto;
			margin-right: 40rpx;
		}

		.report {
			font-size: 28rpx;
			font-weight: 400;
			// line-height: 40rpx;
			text-align: right !important;
			margin-left: auto;
			margin-right: 8rpx;
		}

		.text_gradient {
			&.normal {
				color: rgba(102, 102, 102, 0.5);
				font-size: 24rpx;
			}

			&.danger {
				color: #ff5555;
			}

			&.warning {
				color: #ffa53e;
			}

			&.success {
				color: #12be8a;
			}
		}
	}
</style>